import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.15

import org.kde.kirigami 2.4 as Kirigami

Window {
    width: 800
    height: 600
    visible: true
    color:"silver"
    title: qsTr("Hello World")

    QmlArrowPopup{
        id:popDemo
        x:10
        y:10
        visible:false
        Button{
            text:"hide me"
            //anchors.fill:parent
            anchors.centerIn:parent
            onClicked:{
                console.log("before hide:" + popDemo.x + " " + popDemo.y)
                popDemo.visible = false;
                console.log("after hide:" + popDemo.x + " " + popDemo.y)
            }
        }
    }


    Row{
        id:topRow
        anchors{
            top:parent.top
            margins: Kirigami.Units.gridUnit * 2
        }
        height: Kirigami.Units.gridUnit * 3
        width: parent.width - Kirigami.Units.gridUnit * 4
        
        GridLayout{
            columns:5
            rows:1
            Repeater{
                id:reptTop
                model: 5
                Button{
                    Layout.column:index
                    Layout.margins:Kirigami.Units.gridUnit * 0.75
                    Layout.alignment:Qt.AlignHCenter | Qt.AlignVCenter
                    text: "Button Top " + (index + 1)
                    onClicked:{
                        popDemo.setOrientation(QmlArrowPopup.Orientation.UP);
                        popDemo.setOrientedItem(reptTop.itemAt(index));
                        popDemo.draw();
                    }
                }
            }
        }
    }
    Column{
        id:leftColumn
        anchors{
            top:topRow.bottom
            left:parent.left
        }
        width:Kirigami.Units.gridUnit * 3;
        GridLayout{
            columns:1
            rows:5
            Repeater{
                id:reptLeft
                model: 5
                Button{
                    Layout.row:index
                    Layout.margins:Kirigami.Units.gridUnit * 0.75
                    Layout.alignment:Qt.AlignHCenter | Qt.AlignVCenter
                    text: "Button Left " + (index + 1)
                    onClicked:{
                        popDemo.setOrientation(QmlArrowPopup.Orientation.LEFT);
                        popDemo.setOrientedItem(this);
                        popDemo.draw();
                    }
                }
            }
        }
    }

    Row{
        id:bottomRow
        anchors{
            top:leftColumn.bottom
            left:parent.left
        }
        GridLayout{
            columns:5
            rows:1
            Repeater{
                id:reptBottom
                model: 5
                Button{
                    Layout.column:index
                    Layout.margins:Kirigami.Units.gridUnit * 0.75
                    Layout.alignment:Qt.AlignHCenter | Qt.AlignVCenter
                    text: "Button Bottom " + (index + 1)
                    onClicked:{
                        popDemo.setOrientation(QmlArrowPopup.Orientation.DOWN);
                        popDemo.setOrientedItem(this);
                        popDemo.draw();
                    }
                }
            }
        }
    }

    Column{
        id:rightColumn
        anchors{
            top:topRow.bottom
            right:parent.right
        }
        width:Kirigami.Units.gridUnit * 10;
        GridLayout{
            columns:1
            rows:5
            Repeater{
                id:reptRight
                model: 5
                Button{
                    Layout.row:index
                    Layout.margins:Kirigami.Units.gridUnit * 0.75
                    Layout.alignment:Qt.AlignHCenter | Qt.AlignVCenter
                    text: "Button Right " + (index + 1)
                    onClicked:{
                        popDemo.setOrientation(QmlArrowPopup.Orientation.RIGHT);
                        popDemo.setOrientedItem(this);
                        popDemo.draw();
                    }
                }
            }
        }
    }
}
